<template>
  <div class="work-info-container">
    <div class="work-info-search">
      <span class="page-title">招聘信息列表</span>
      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="企业名称" value="1"></el-option>
          <el-option label="岗位名称" value="2"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchWork">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
      <el-button type="success" size="small" icon="el-icon-plus" @click="handelAdd"
                 v-if="checkPermissionPoints(1) == 1">新增
      </el-button>
    </div>

    <div class="work-info-table">
      <el-table ref="multipleTable" :data="workData" border stripe v-loading="listLoading" @filter-change="filterChange"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}">
        <el-table-column prop="id" label="id" width="80">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="240" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.mechanismName}}
          </template>
        </el-table-column>
        <el-table-column label="招聘封面" width="160">
          <template slot-scope="scope">
            <viewer :images="scope.row.workUrl">
              <img v-lazy="item" class="circle_pic" v-for="(item,index) in scope.row.workUrl" :key="index"/>
            </viewer>
          </template>
        </el-table-column>

        <el-table-column label="工作类型" width="120"
                         :filters="[{ text: '正式工', value: 0 }, { text: '小时工', value: 1 }]"
                         :filter-multiple="false" column-key="postType"
                         filter-placement="bottom-end" prop="postType">
          <template slot-scope="scope">
            <span>{{scope.row.postType | changePostType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="岗位类型" width="120">
          <template slot-scope="scope">
            {{scope.row.workTypeName}}
          </template>
        </el-table-column>
        <el-table-column label="返费时间(月)" width="120">
          <template slot-scope="scope">
            {{scope.row.reTime}}
          </template>
        </el-table-column>
        <el-table-column label="总招工" width="100">
          <template slot-scope="scope">
            {{scope.row.maxNumber}}
          </template>
        </el-table-column>
        <el-table-column label="招工状态" width="120"
                         :filters="[{ text: '正在招工', value: 0 }, { text: '待招聘', value: 1 }]"
                         :filter-multiple="false" column-key="status"
                         filter-placement="bottom-end" prop="status">
          <template slot-scope="scope">
            <span>{{scope.row.status | changeStatus}}</span>
          </template>
        </el-table-column>

        <el-table-column label="排序" width="100">
          <template slot-scope="scope">
            {{scope.row.sortType | changeSortType}}
          </template>
        </el-table-column>

        <el-table-column label="是否热门" width="90">
          <template slot-scope="scope">
            {{scope.row.hotStatus | changeHotStatus}}
          </template>
        </el-table-column>

        <el-table-column label="是否隐藏" width="120"
                         :filters="[{ text: '显示', value: 0 }, { text: '隐藏', value: 1 }]"
                         :filter-multiple="false" column-key="delStatus"
                         filter-placement="bottom-end" prop="delStatus">
          <template slot-scope="scope">
            <span>{{scope.row.delStatus | changeDelStatus}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="160" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)" v-if="checkPermissionPoints(4) == 1">编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleDelete(row)" v-if="checkPermissionPoints(2) == 1">删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getWorkList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="work-info-dialog look-dialog"
               top="11vh">
      <el-form label-width="160px" size="mini">
        <el-form-item label="企业名称：">
          <span>{{work.mechanismName}}</span>
        </el-form-item>
        <!--<el-form-item label="企业介绍视频：">-->
        <!--<div class="video-play-box" @click="playVideo(work.video)">-->
        <!--<img :src="work.video + '?vframe/png/offset/0.001'" class="play-icon"-->
        <!--v-if="work.video" alt="点击播放视频">-->
        <!--<img :src="require('../../../assets/common_images/play-video.png')" class="play-icon" v-else>-->
        <!--<div class="video-play-con">-->
        <!--<span class="video-url">{{work.video}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</el-form-item>-->
        <el-form-item label="招聘封面：">
          <img v-lazy="item" v-for="(item,i) in work.workUrl" :key="i"
               style="object-fit: cover;width: 96px;height: 96px;border-radius: 2px;padding-right: 5px"/>
        </el-form-item>
        <el-form-item label="企业类型：">
          <span>{{work.mechanismTypeName}}</span>
        </el-form-item>
        <el-form-item label="岗位类型：">
          <span>{{work.workTypeName}}</span>
        </el-form-item>
        <el-form-item label="工作类型：">
          <span>{{work.postType | changePostType}}</span>
        </el-form-item>
        <el-form-item label="工资范围(元)：" v-if="work.postType == 0">
          <span>{{work.wageRange}}</span>
        </el-form-item>
        <el-form-item label="工价(元)：" v-if="work.postType == 1">
          <span>{{work.workMoney}}</span>
        </el-form-item>
        <el-form-item label="返费金额(元)：" v-if="work.postType == 0">
          <span>{{work.reMoney}}</span>
        </el-form-item>
        <el-form-item label="补贴工价(元)：" v-if="work.postType == 1">
          <span>{{work.addWorkMoney}}</span>
        </el-form-item>
        <el-form-item label="返费时间(月)：">
          <span>{{work.reTime}}</span>
        </el-form-item>
        <el-form-item label="总招人数：">
          <span>{{work.maxNumber}}</span>
        </el-form-item>
        <el-form-item label="面试地点：">
          <span>{{work.recruitAddress}}</span>
        </el-form-item>
        <el-form-item label="面试时间：">
          <span>{{work.interviewTime}}</span>
        </el-form-item>
        <el-form-item label="排序：">
          <span>{{work.sortType | changeSortType}}</span>
        </el-form-item>
        <el-form-item label="招工状态：">
          <span>{{work.status | changeStatus}}</span>
        </el-form-item>
        <el-form-item label="是否可借支：">
          <span>{{work.lendType | changeLendType}}</span>
        </el-form-item>
        <el-form-item label="返费说明：">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" v-html="work.reInstruction"></el-input>
        </el-form-item>
        <el-form-item label="报名时是否需要实名：">
          <span>{{work.isRealname | changeRealName}}</span>
        </el-form-item>
        <el-form-item label="是否为热门企业：">
          <span>{{work.hotStatus | changeHotStatus}}</span>
        </el-form-item>
        <el-form-item label="是否允许店主下架：">
          <span>{{work.dismountType | changeDismountType}}</span>
        </el-form-item>
        <el-form-item label="是否展示返费：">
          <span>{{work.reStatus | changeRetFee}}</span>
        </el-form-item>
        <el-form-item label="是否显示隐藏：">
          <span>{{work.delStatus | changeDelStatus}}</span>
        </el-form-item>

        <!--岗位要求-->
        <el-divider content-position="center">岗位要求</el-divider>
        <el-form-item label="性别年龄：">
          <span>{{work.sexAge}}</span>
        </el-form-item>
        <el-form-item label="纹身染发：">
          <span>{{work.tattooHair}}</span>
        </el-form-item>
        <el-form-item label="体检：">
          <span>{{work.medicalFee}}</span>
        </el-form-item>
        <el-form-item label="视力：">
          <span>{{work.vision}}</span>
        </el-form-item>
        <el-form-item label="文化技能：">
          <span>{{work.culturalSkills}}</span>
        </el-form-item>
        <el-form-item label="民族：">
          <span>{{work.nation}}</span>
        </el-form-item>
        <el-form-item label="身份证：">
          <span>{{work.idCard}}</span>
        </el-form-item>
        <el-form-item label="其他要求：">
          <span>{{work.postOther}}</span>
        </el-form-item>

        <!--薪资福利-->
        <el-divider content-position="center">薪资福利</el-divider>
        <el-form-item label="底薪说明：" v-if="work.postType == 0">
          <span>{{work.workingPrice}}</span>
        </el-form-item>
        <el-form-item label="加班费说明：" v-if="work.postType == 0">
          <span>{{work.overtimeDetails}}</span>
        </el-form-item>
        <el-form-item label="工价：" v-if="work.postType == 1">
          <span>{{work.hoursPrice}}</span>
        </el-form-item>
        <el-form-item label="补贴说明：">
          <span>{{work.subsidyDetails}}</span>
        </el-form-item>
        <el-form-item label="发薪时间：">
          <span>{{work.payrollTime}}</span>
        </el-form-item>
        <el-form-item label="其他说明：">
          <span>{{work.salaryOther}}</span>
        </el-form-item>

        <!--食宿条件-->
        <el-divider content-position="center">食宿条件</el-divider>
        <el-form-item label="住宿：">
          <span>{{work.accConditions}}</span>
        </el-form-item>
        <el-form-item label="饮食：">
          <span>{{work.diet}}</span>
        </el-form-item>
        <el-form-item label="其他说明：">
          <span>{{work.accOther}}</span>
        </el-form-item>

        <!--工作时间-->
        <el-divider content-position="center">工作时间</el-divider>
        <el-form-item label="工作制：">
          <span>{{work.workSystem}}</span>
        </el-form-item>
        <el-form-item label="班次时间：">
          <span>{{work.shiftTime}}</span>
        </el-form-item>
        <el-form-item label="其他说明：">
          <span>{{work.workOther}}</span>
        </el-form-item>

        <!--面试资料-->
        <el-divider content-position="center">面试资料</el-divider>
        <el-form-item label="面试资料：">
          <span>{{work.interviewData}}</span>
        </el-form-item>
        <el-form-item label="其他说明：">
          <span>{{work.interviewOther}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--<el-button type="primary" style="width: 96px">编辑</el-button>-->
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--新增/编辑-->
    <el-dialog :title="textMap[dialogStatus]" :lock-scroll="true" :visible.sync="dialogEditVisible" width="960px"
               top="11vh"
               class="work-info-dialog" @close="cancelWork">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="165px" size="mini">
        <el-form-item label="企业名称：" style="margin-top: 4px" prop="mechanismName">
          <el-input v-model="ruleForm.mechanismName" style="width: 640px;" placeholder="请选择企业名称" :disabled="true"
                    class="input-with-select" @click.native="openCompanyView">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <!--<el-form-item label="企业介绍视频：" prop="videoUrl" ref="videoUrl">-->
        <!--<span>只能上传mp4文件，且不超过10M</span>-->
        <!--<el-upload :action="upload_qiniu_url" list-type="text" :auto-upload="true"-->
        <!--:limit="1" accept="audio/mp4,video/mp4" :data="qiniuData"-->
        <!--:before-upload="beforeImageUpload2" :file-list="fileList2" :on-remove="handleRemove2"-->
        <!--:on-exceed="handleExceed2" :http-request="upQiniu2">-->
        <!--<el-button size="mini" type="primary">点击上传</el-button>-->
        <!--</el-upload>-->
        <!--</el-form-item>-->
        <el-form-item label="招聘封面：" prop="workUrl" ref="workUrl">
          <span>只能上传jpg/png/jpeg文件，且不超过1M，最多3张（建议尺寸320*320）</span>
          <el-upload :action="upload_qiniu_url" list-type="picture-card" :auto-upload="true"
                     :limit="3" accept="image/jpg,image/png,image/jpeg" :data="qiniuData" :file-list="fileList"
                     :before-upload="beforeImageUpload" :on-exceed="handleExceed" :on-remove="handleRemove"
                     :on-success="uploadSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="企业岗位类型：" prop="workTypeId">
          <el-cascader style="width: 360px;" :options="jobTypeOptions" :props="jobTypeProps" v-model="jobTypeId"
                       placeholder="请选择企业岗位类型"></el-cascader>
        </el-form-item>

        <el-form-item label="工作类型：" prop="postType">
          <el-radio-group v-model="ruleForm.postType">
            <el-radio :label="0">正式工</el-radio>
            <el-radio :label="1">小时工</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="工资范围：" prop="wageRange" v-show="ruleForm.postType == 0">
          <el-input style="width: 640px;" placeholder="请输入工资范围" :clearable="true"
                    v-model="ruleForm.wageRange"></el-input>
        </el-form-item>
        <el-form-item label="返费金额：" prop="reMoney" v-show="ruleForm.postType == 0">
          <el-input style="width: 640px;" placeholder="请输入返费金额" :clearable="true" v-model="ruleForm.reMoney"></el-input>
        </el-form-item>

        <el-form-item label="工价(元)：" prop="workMoney" v-show="ruleForm.postType == 1">
          <el-input style="width: 640px;" placeholder="请输入工价" :clearable="true" v-model="ruleForm.workMoney"></el-input>
        </el-form-item>
        <el-form-item label="补贴工价(元)：" prop="addWorkMoney" v-show="ruleForm.postType == 1">
          <el-input style="width: 640px;" placeholder="请输入补贴工价" :clearable="true"
                    v-model="ruleForm.addWorkMoney"></el-input>
        </el-form-item>

        <el-form-item label="总招人数：" prop="maxNumber">
          <el-input style="width: 640px;" placeholder="请输入总招人数" :clearable="true"
                    v-model="ruleForm.maxNumber"></el-input>
        </el-form-item>
        <el-form-item label="面试地点：" prop="recruitAddress">
          <el-input style="width: 640px;" placeholder="请输入面试地点" :clearable="true"
                    v-model="ruleForm.recruitAddress"></el-input>
        </el-form-item>


        <el-form-item label="面试时间：">
          <el-col :span="6">
            <el-form-item prop="startTime">
              <el-time-select placeholder="开始时间" v-model="ruleForm.startTime"
                              :picker-options="{ start: '00:00', step: '00:10', end: '24:00'}"></el-time-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="6">
            <el-form-item prop="endTime">
              <el-time-select placeholder="结束时间" v-model="ruleForm.endTime"
                              :picker-options="{ start: '00:00', step: '00:10', end: '24:00', minTime: ruleForm.startTime}"></el-time-select>
            </el-form-item>
          </el-col>
        </el-form-item>


        <el-form-item label="排序：" prop="sortType">
          <el-radio-group v-model="ruleForm.sortType">
            <el-radio :label=0>普通</el-radio>
            <el-radio :label=1>优先</el-radio>
            <el-radio :label=2>轮播图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="招工状态：" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">正在招工</el-radio>
            <el-radio :label="1">待招聘</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否可借支：" prop="lendType">
          <el-radio-group v-model="ruleForm.lendType">
            <el-radio :label="0">不可借支</el-radio>
            <el-radio :label="1">可借支</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="返费说明：" prop="reInstruction">
          <el-input type="textarea" style="width: 640px;" :autosize="{ minRows: 4, maxRows: 6 }"
                    v-model="ruleForm.reInstruction"></el-input>
        </el-form-item>
        <el-form-item label="报名时是否需要实名：" prop="isRealname">
          <el-radio-group v-model="ruleForm.isRealname">
            <el-radio :label="0">不需要</el-radio>
            <el-radio :label="1">需要</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否为热门企业：" prop="hotStatus">
          <el-radio-group v-model="ruleForm.hotStatus">
            <el-radio :label="0">非热门</el-radio>
            <el-radio :label="1">热门</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许店主下架：" prop="dismountType">
          <el-radio-group v-model="ruleForm.dismountType">
            <el-radio :label="0">允许</el-radio>
            <el-radio :label="1">不允许</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展示返费：" prop="reStatus">
          <el-radio-group v-model="ruleForm.reStatus">
            <el-radio label="0">不展示</el-radio>
            <el-radio label="1">展示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否显示隐藏：" prop="delStatus">
          <el-radio-group v-model="ruleForm.delStatus">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>

        <!--岗位要求-->
        <el-divider content-position="center">岗位要求</el-divider>
        <el-form-item label="性别年龄：" prop="sexAge">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入性别年龄" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.sexAge"></el-input>
        </el-form-item>
        <el-form-item label="纹身染发：" prop="tattooHair">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入纹身染发" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.tattooHair"></el-input>
        </el-form-item>
        <el-form-item label="体检：" prop="medicalFee">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入体检" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.medicalFee"></el-input>
        </el-form-item>
        <el-form-item label="视力：" prop="vision">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入视力" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.vision"></el-input>
        </el-form-item>
        <el-form-item label="文化技能：" prop="culturalSkills">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入文化技能" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.culturalSkills"></el-input>
        </el-form-item>
        <el-form-item label="民族：" prop="nation">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入民族" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.nation"></el-input>
        </el-form-item>
        <el-form-item label="身份证：" prop="idCard">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入身份证" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="其他要求：" prop="postOther">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入其他要求" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.postOther"></el-input>
        </el-form-item>

        <!--薪资福利-->
        <el-divider content-position="center">薪资福利</el-divider>
        <el-form-item label="底薪说明：" prop="workingPrice" v-if="ruleForm.postType == 0">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入底薪说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.workingPrice"></el-input>
        </el-form-item>
        <el-form-item label="加班费说明：" prop="overtimeDetails" v-if="ruleForm.postType == 0">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入加班费说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.overtimeDetails"></el-input>
        </el-form-item>
        <el-form-item label="工价：" prop="hoursPrice" v-if="ruleForm.postType == 1">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入工价" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.hoursPrice"></el-input>
        </el-form-item>
        <el-form-item label="补贴说明：" prop="subsidyDetails">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入补贴说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.subsidyDetails"></el-input>
        </el-form-item>
        <el-form-item label="发薪时间：" prop="payrollTime">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入发薪时间" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.payrollTime"></el-input>
        </el-form-item>
        <el-form-item label="其他说明：" prop="salaryOther">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入其他说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.salaryOther"></el-input>
        </el-form-item>

        <!--食宿条件-->
        <el-divider content-position="center">食宿条件</el-divider>
        <el-form-item label="住宿：" prop="accConditions">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入住宿" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.accConditions"></el-input>
        </el-form-item>
        <el-form-item label="饮食：" prop="diet">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入饮食" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.diet"></el-input>
        </el-form-item>
        <el-form-item label="其他说明：" prop="accOther">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入其他说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.accOther"></el-input>
        </el-form-item>

        <!--工作时间-->
        <el-divider content-position="center">工作时间</el-divider>
        <el-form-item label="工作制：" prop="workSystem">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入工作制" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.workSystem"></el-input>
        </el-form-item>
        <el-form-item label="班次时间：" prop="shiftTime">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入班次时间" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.shiftTime"></el-input>
        </el-form-item>
        <el-form-item label="其他说明：" prop="workOther">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入其他说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.workOther"></el-input>
        </el-form-item>

        <!--面试资料-->
        <el-divider content-position="center">面试资料</el-divider>
        <el-form-item label="面试资料：" prop="interviewData">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入面试资料" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.interviewData"></el-input>
        </el-form-item>
        <el-form-item label="其他说明：" prop="interviewOther">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入其他说明" :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="ruleForm.interviewOther"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="success" style="width: 96px" @click="saveWork" :loading="sendLoad">保存</el-button>
        <el-button size="small" style="width: 96px" @click="cancelWork">取消</el-button>
      </div>
    </el-dialog>

    <company :companyView="companyView" @closeCompany="closeCompany" @selectCompany="selectCompany"></company>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {baseUrl} from "@/api/constant";
  import {formatDate} from "@/utils/index";
  import company from '@/components/common/company';
  import {getQiNiuUpToken} from "../../../api/user/user";
  import {
    addWork,
    deleteWork,
    getInitWorkList,
    getWorkDetail,
    getWorkTypeList,
    modifyWork
  } from "../../../api/work/work";


  export default {
    name: "workinfo",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    components: {
      Pagination,
      company
    },
    data() {
      var checkStartTime = (rule, value, callback) => {
        if (this.ruleForm.startTime === '') {
          callback(new Error('请选择开始时间'));
        }
        callback();
      };
      var checkEndTime = (rule, value, callback) => {
        if (this.ruleForm.endTime === '') {
          callback(new Error('请选择结束时间'));
        }
        callback();
      };
      var checkJobTypeId = (rule, value, callback) => {
        if (this.jobTypeId.length == 0) {
          return callback(new Error('请选择企业岗位类型'));
        }
        this.ruleForm.mechanismTypeId = this.jobTypeId[0];
        this.ruleForm.workTypeId = this.jobTypeId[1];
        callback();
      };
      var checkWageRange = (rule, value, callback) => {
        if (this.ruleForm.postType == 0) {
          if (this.ruleForm.wageRange === '' || this.ruleForm.wageRange == undefined) {
            callback(new Error('请输入工资范围'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkReMoney = (rule, value, callback) => {
        if (this.ruleForm.postType == 0) {
          if (this.ruleForm.reMoney === '' || this.ruleForm.reMoney == undefined) {
            callback(new Error('请输入返费金额'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkWorkMoney = (rule, value, callback) => {
        if (this.ruleForm.postType == 1) {
          if (this.ruleForm.workMoney === '' || this.ruleForm.workMoney == undefined) {
            callback(new Error('请输入工价'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkAddWorkMoney = (rule, value, callback) => {
        if (this.ruleForm.postType == 1) {
          if (this.ruleForm.addWorkMoney === '' || this.ruleForm.addWorkMoney == undefined) {
            callback(new Error('请输入补贴工价'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkWorkingPrice = (rule, value, callback) => {
        if (this.ruleForm.postType == 0) {
          if (this.ruleForm.workingPrice === '' || this.ruleForm.workingPrice == undefined) {
            callback(new Error('请输入底薪说明'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkOvertimeDetails = (rule, value, callback) => {
        if (this.ruleForm.postType == 0) {
          if (this.ruleForm.overtimeDetails === '' || this.ruleForm.overtimeDetails == undefined) {
            callback(new Error('请输入加班费说明'));
          }
          callback();
        } else {
          callback();
        }
      };
      var checkHoursPrice = (rule, value, callback) => {
        if (this.ruleForm.postType == 1) {
          if (this.ruleForm.hoursPrice === '' || this.ruleForm.hoursPrice == undefined) {
            callback(new Error('请输入工价'));
          }
          callback();
        } else {
          callback();
        }
      };
      var validatePic = (rule, value, callback) => {
        if (this.fileList.length == 0) {
          callback(new Error('请上传招聘封面'));
        }
        callback();
      };
      return {
        companyView: false,
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          mechanismName: '',
          workTypeName: '',
          status: '',
          postType: '',
          delStatus: '',
        },
        paramFilters: [],
        keyWords: '',
        select: '1',
        listLoading: false,
        dialogType: 'edit',
        dialogLookVisible: false,
        dialogEditVisible: false,
        textMap: {
          update: '编辑',
          create: '新增'
        },
        dialogStatus: '',
        workData: [],
        work: {},
        ruleForm: {
          id: '',
          mechanismName: '',
          videoUrl: '',
          workUrl: '',
          mechanismTypeId: '',
          workTypeId: '',
          postType: 0,
          wageRange: '',
          reMoney: '',
          addWorkMoney: '',
          workMoney: '',
          maxNumber: '',
          recruitAddress: '',
          interviewTime: '',
          sortType: 0,
          status: 0,
          lendType: 0,
          reInstruction: '',
          hotStatus: 0,
          dismountType: 1,
          reStatus: '1',
          delStatus: 0,
          isRealname: 0,
          sexAge: '',
          tattooHair: '',
          medicalFee: '',
          vision: '',
          culturalSkills: '',
          nation: '',
          idCard: '',
          postOther: '',
          workingPrice: '',
          overtimeDetails: '',
          hoursPrice: '',
          subsidyDetails: '',
          payrollTime: '',
          salaryOther: '',
          accConditions: '',
          diet: '',
          accOther: '',
          workSystem: '',
          shiftTime: '',
          workOther: '',
          interviewData: '',
          interviewOther: '',
          startTime: '',
          endTime: ''
        },
        rules: {
          mechanismName: [
            {required: true, message: '请选择企业名称', trigger: 'change'}
          ],
          workUrl: [
            {required: true, validator: validatePic, trigger: 'change'}
          ],
          workTypeId: [
            {required: true, validator: checkJobTypeId, trigger: 'change'}
          ],
          postType: [
            {required: true, message: '请输入工作类型', trigger: 'blur'}
          ],
          wageRange: [
            {required: true, validator: checkWageRange, trigger: 'blur'}
          ],
          reMoney: [
            {required: true, validator: checkReMoney, trigger: 'blur'}
          ],
          workMoney: [
            {required: true, validator: checkWorkMoney, trigger: 'blur'}
          ],
          addWorkMoney: [
            {required: true, validator: checkAddWorkMoney, trigger: 'blur'}
          ],
          maxNumber: [
            {required: true, message: '请输入总招人数', trigger: 'blur'}
          ],
          recruitAddress: [
            {required: true, message: '请输入面试地点', trigger: 'blur'}
          ],
          startTime: [
            {required: true, validator: checkStartTime, trigger: 'change'}
          ],
          endTime: [
            {required: true, validator: checkEndTime, trigger: 'change'}
          ],
          sortType: [
            {required: true, message: '请选择排序', trigger: 'change'}
          ],
          status: [
            {required: true, message: '请选择招工状态', trigger: 'change'}
          ],
          lendType: [
            {required: true, message: '请选择是否可借支', trigger: 'change'}
          ],
          reInstruction: [
            {required: false, message: '请输入返费说明', trigger: 'blur'}
          ],
          hotStatus: [
            {required: true, message: '请选择是否为热门企业', trigger: 'change'}
          ],
          dismountType: [
            {required: true, message: '请选择是否允许店主下架', trigger: 'change'}
          ],
          reStatus: [
            {required: true, message: '请选择是否展示返费', trigger: 'change'}
          ],
          delStatus: [
            {required: true, message: '请选择是否显示隐藏', trigger: 'change'}
          ],
          isRealname: [
            {required: true, message: '请选择报名时是否需要实名', trigger: 'change'}
          ],
          sexAge: [
            {required: true, message: '请输入性别年龄', trigger: 'blur'}
          ],
          tattooHair: [
            {required: true, message: '请输入纹身染发', trigger: 'blur'}
          ],
          medicalFee: [
            {required: true, message: '请输入体检', trigger: 'blur'}
          ],
          vision: [
            {required: true, message: '请输入视力', trigger: 'blur'}
          ],
          culturalSkills: [
            {required: true, message: '请输入文化技能', trigger: 'blur'}
          ],
          nation: [
            {required: true, message: '请输入民族', trigger: 'blur'}
          ],
          idCard: [
            {required: true, message: '请输入身份证', trigger: 'blur'}
          ],
          postOther: [
            {required: true, message: '请输入其他要求', trigger: 'blur'}
          ],
          workingPrice: [
            {required: true, validator: checkWorkingPrice, trigger: 'blur'}
          ],
          overtimeDetails: [
            {required: true, validator: checkOvertimeDetails, trigger: 'blur'}
          ],
          hoursPrice: [
            {required: true, validator: checkHoursPrice, trigger: 'blur'}
          ],
          subsidyDetails: [
            {required: true, message: '请输入补贴说明', trigger: 'blur'}
          ],
          payrollTime: [
            {required: true, message: '请输入发薪时间', trigger: 'blur'}
          ],
          salaryOther: [
            {required: true, message: '请输入其他说明', trigger: 'blur'}
          ],
          accConditions: [
            {required: true, message: '请输入住宿', trigger: 'blur'}
          ],
          diet: [
            {required: true, message: '请输入饮食', trigger: 'blur'}
          ],
          accOther: [
            {required: true, message: '请输入其他说明', trigger: 'blur'}
          ],
          workSystem: [
            {required: true, message: '请输入工作制', trigger: 'blur'}
          ],
          shiftTime: [
            {required: true, message: '请输入班次时间', trigger: 'blur'}
          ],
          workOther: [
            {required: true, message: '请输入其他说明', trigger: 'blur'}
          ],
          interviewData: [
            {required: true, message: '请输入面试资料', trigger: 'blur'}
          ],
          interviewOther: [
            {required: true, message: '请输入其他说明', trigger: 'blur'}
          ]
        },
        upload_qiniu_url: "https://upload-z2.qiniup.com",
        upload_qiniu_addr: "http://pic.lanpin123.com/",
        qiniuData: {
          token: "",
          key: ""
        },
        fileList: [],
        fileList2: [],
        jobTypeOptions: [],
        jobTypeProps: {
          value: 'id',
          label: 'mechanismTypeName',
          children: 'yWorkTypeList'
        },
        jobTypeId: [],
        sendLoad: false
      }
    },
    created() {
      this.getWorkList();

      getQiNiuUpToken().then((res) => {
        this.qiniuData.token = res.data;
      });

      getWorkTypeList().then((res) => {
        this.jobTypeOptions = res.data.items;
      });
    },
    methods: {
      filterChange(value) {//过滤
        let row = null;
        let val = null;
        for (const i in value) {
          row = i; // 保存 column-key的值，如果事先没有为column-key赋值，系统会自动生成一个唯一且恒定的名称
          val = value[i];
        }
        const filter = [{
          row: row,
          op: 'contains',
          value: val
        }];
        this.setFilter(filter)
      },
      setFilter(filters) {
        for (let i in filters) {
          let filter = null;
          for (let j in this.paramFilters) {
            if (filters[i]['row'] === this.paramFilters[j]['row']) {
              filter = this.paramFilters[j];
            }
          }

          if (filter == null) {
            this.paramFilters.push({'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value});
          } else {
            filter.value = filters[i].value;
            filter.op = filters[i].op;
          }
        }

        this.paramFilters.forEach(obj => {
          if (obj.row == 'status') {
            this.listQuery.status = String(obj.value);
          }
          if (obj.row == 'postType') {
            this.listQuery.postType = String(obj.value);
          }
          if (obj.row == 'delStatus') {
            this.listQuery.delStatus = String(obj.value);
          }
        });
        this.listQuery.page = 1;
        this.getWorkList();
      },
      searchWork() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.mechanismName = '';
        this.listQuery.workTypeName = '';
        if (this.select == 1) {
          this.listQuery.mechanismName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.workTypeName = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getWorkList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.mechanismName = '';
        this.listQuery.workTypeName = '';
        this.listQuery.status = '';
        this.listQuery.postType = '';
        this.listQuery.delStatus = '';
        this.$refs.multipleTable.clearFilter();
        this.listQuery.page = 1;
        this.getWorkList();
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.workinfo;
        return permissionPoints(type, pointObj);
      },
      upQiniu2(req) {
        this.commonImageUpload(req, (res) => {
          if (!res.data.key) {
            this.$message.error({message: '视频上传失败,请重新上传', duration: 2000});
            return;
          } else {
            this.ruleForm.videoUrl = this.upload_qiniu_addr + res.data.key;
            this.$refs['videoUrl'].clearValidate();
          }
        })
      },
      handleExceed2() {
        this.$notify.warning({
          title: '警告',
          message: '一次只能上传一个视频',
          duration: 2000
        });
      },
      handleRemove2() {
        this.ruleForm.videoUrl = '';
      },
      beforeImageUpload2(file) {
        const limitType = file.type === 'audio/mp4' || file.type === 'video/mp4';
        if (!limitType) {
          this.$notify.warning({
            title: '警告',
            message: '请上传格式为audio/mp4,video/mp4的视频'
          })
        }
        let limitSize = file.size / 1024 / 1024 / 10 < 10;
        if (!limitSize) {
          this.$notify.warning({
            title: '警告',
            message: '视频大小必须小于10M'
          })
        }
        return limitType && limitSize;
      },
      handleExceed() {
        this.$notify.warning({
          title: '警告',
          message: '一次只能上传三张图片',
          duration: 2000
        });
      },
      beforeImageUpload(file) {
        let fileType = 'jpg';
        if (file.type === 'image/png') {
          fileType = 'png'
        } else if (file.type === 'image/jpeg') {
          fileType = 'jpeg'
        }
        this.qiniuData.key = `front-${formatDate(new Date(), 'yyyyMMddhhmmss')}${Math.floor(Math.random() * 100)}.${fileType}`;

        const limitType = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
        if (!limitType) {
          this.$notify.warning({
            title: '警告',
            message: '请上传格式为image/png,image/jpg,image/jpeg的图片'
          })
        }
        let limitSize = file.size / 1024 / 1024 / 1 < 1;
        if (!limitSize) {
          this.$notify.warning({
            title: '警告',
            message: '图片大小必须小于1M'
          })
        }
        return limitType && limitSize;
      },
      handleRemove(file) {
        this.fileList = this.fileList.filter(item => file.uid !== item.uid);
      },
      uploadSuccess(res, file, fileList) {
        this.fileList.push({
          uid: fileList[fileList.length - 1].uid,
          url: this.upload_qiniu_addr + fileList[fileList.length - 1].response.key
        });
      },
      commonImageUpload(req, callback) {
        const config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        let fileType = '';
        if (req.file.type === 'image/jpg') {
          fileType = 'jpg'
        } else if (req.file.type === 'image/png') {
          fileType = 'png'
        } else if (req.file.type === 'image/jpeg') {
          fileType = 'jpeg'
        } else if (req.file.type === 'audio/mp4' || req.file.type === 'video/mp4') {
          fileType = 'mp4'
        }
        const key = `front-${formatDate(new Date(), 'yyyyMMddhhmmss')}${Math.floor(Math.random() * 100)}.${fileType}`;

        const fd = new FormData();
        fd.append('file', req.file);
        fd.append('token', this.qiniuData.token);
        fd.append('key', key);
        this.axios.post(this.upload_qiniu_url, fd, config).then(res => {
          callback(res);
        });
      },
      upQiniu(req) {
        this.commonImageUpload(req, (res) => {
          if (!res.data.key) {
            this.$message.error({message: '招聘封面上传失败,请重新上传', duration: 2000});
            return;
          } else {
            this.fileList.push({url: this.upload_qiniu_addr + res.data.key});
            this.$refs['workUrl'].clearValidate();
          }
        })
      },
      openCompanyView() {
        this.companyView = true;
      },
      closeCompany() {
        this.companyView = false;
      },
      selectCompany(company) {
        const {id, mechanismName} = company;
        this.ruleForm.mechanismId = id;
        this.ruleForm.mechanismName = mechanismName;
        this.closeCompany();
      },
      getWorkList() {
        this.listLoading = true;
        getInitWorkList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;

            items.forEach((item) => {
              if (item.workUrl) {
                item.workUrl = item.workUrl.split(';');
              }
            });
            this.workData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      handelAdd() {
        this.dialogStatus = 'create';
        this.dialogEditVisible = true;
      },
      handleLook(row) {//详细信息
        this.dialogLookVisible = true;
        getWorkDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.work = retObj.data;
            if (retObj.data.imageList) {
              this.work.video = retObj.data.imageList.split(';')[0];
            }
            if (retObj.data.workUrl) {
              this.work.workUrl = retObj.data.workUrl.split(';');
            }
          }
        })
      },
      handleEdit(row) {//编辑
        this.dialogStatus = 'update';
        this.dialogEditVisible = true;
        getWorkDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.ruleForm = retObj.data;

            let tempList = retObj.data.workUrl.split(';');
            for (let index in tempList) {
              this.fileList.push({'url': tempList[index]});
            }

            if (this.ruleForm.interviewTime) {
              this.$set(this.ruleForm, 'startTime', this.ruleForm.interviewTime.split('-')[0]);
              this.$set(this.ruleForm, 'endTime', this.ruleForm.interviewTime.split('-')[1]);
            }
            this.jobTypeId = [];
            this.jobTypeId.push(this.ruleForm.mechanismTypeId);
            this.jobTypeId.push(this.ruleForm.workTypeId);
          }
        })
      },
      handleDelete(row) {//删除
        this.$confirm('此操作将删除该招聘, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWork(row.id).then((res) => {
            let retObj = res;
            if (retObj.code == 0 && retObj.data > 0) {
              this.$message.success({message: '删除成功', duration: 2000});
              this.getWorkList();
            } else {
              this.$message.error({message: '删除失败，请重试', duration: 2000});
            }
          })
        }).catch((err) => {
        });
      },
      playVideo(video) {
        window.open(video);
      },
      saveWork() {
        if (this.fileList.length > 0) {
          let temp = this.fileList.map((item) => {
            return `${item.url}`;
          });
          this.ruleForm.workUrl = temp.join(';')
        }

        if (this.dialogStatus == 'create') {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.sendLoad = true;
              this.ruleForm.interviewTime = `${this.ruleForm.startTime}-${this.ruleForm.endTime}`;
              addWork(this.ruleForm).then((res) => {//新增
                let retObj = res;
                this.sendLoad = false;
                if (retObj.code == 0 && retObj.data == 1) {
                  this.fileList = [];
                  this.jobTypeId = [];
                  this.$refs.ruleForm.resetFields();
                  this.dialogEditVisible = false;
                  this.$message.success({message: '新增成功', duration: 2000});
                  this.getWorkList();
                } else {
                  this.$message.error({message: '新增失败，请重试', duration: 2000});
                }
              }).catch(() => {
                this.sendLoad = false;
              })
            } else {
              return false;
            }
          });
        } else {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.sendLoad = true;
              this.ruleForm.interviewTime = `${this.ruleForm.startTime}-${this.ruleForm.endTime}`;
              modifyWork(this.ruleForm).then((res) => {//修改
                let retObj = res;
                this.sendLoad = false;
                if (retObj.code == 0 && retObj.data == 1) {
                  this.fileList = [];
                  this.jobTypeId = [];
                  this.$refs.ruleForm.resetFields();
                  this.dialogEditVisible = false;
                  this.$message.success({message: '修改成功', duration: 2000});
                  this.getWorkList();
                } else {
                  this.$message.error({message: '修改失败，请重试', duration: 2000});
                }
              }).catch(() => {
                this.sendLoad = false;
              })
            } else {
              return false;
            }
          });
        }
      },
      cancelWork() {
        this.dialogEditVisible = false;
        this.fileList = [];
        this.jobTypeId = [];
        this.$refs.ruleForm.resetFields();
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
      changePostType(type) {
        if (type == 0) {
          return '正式工';
        } else if (type == 1) {
          return '小时工';
        }
      },
      changeSortType(type) {
        if (type == 0) {
          return '普通';
        } else if (type == 1) {
          return '优先排序';
        }
        else if (type == 2) {
          return '轮播图';
        }
      },
      changeHotStatus(type) {
        if (type == 0) {
          return '非热门';
        } else if (type == 1) {
          return '热门';
        }
      },
      changeRealName(type) {
        if (type == 0) {
          return '不需要';
        } else if (type == 1) {
          return '需要';
        }
      },
      changeDelStatus(type) {
        if (type == 0) {
          return '显示';
        } else if (type == 1) {
          return '隐藏';
        }
      },
      changeLendType(type) {
        if (type == 0) {
          return '不借支';
        } else if (type == 1) {
          return '可借支';
        }
      },
      changeDismountType(type) {
        if (type == 0) {
          return '可以被下架';
        } else if (type == 1) {
          return '允许下架';
        }
      },
      changeRetFee(type) {
        if (type == 0) {
          return '不展示';
        } else if (type == 1) {
          return '展示';
        }
      },
      changeDelStatus(type) {
        if (type == 0) {
          return '显示';
        } else if (type == 1) {
          return '隐藏';
        }
      },
      changeStatus(type) {
        if (type == 0) {
          return '正在招工';
        } else if (type == 1) {
          return '待招聘';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .work-info-container {
    .work-info-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 18px;
        padding-right: 36px;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .excel-inout-box {
        margin-left: auto;
        margin-right: 18px;
      }
    }
    .video-play-box {
      width: 450px;
      height: 90px;
      display: flex;
      align-items: center;
      border-radius: 2px;
      cursor: pointer;
      margin-bottom: 5px;
      .play-icon {
        width: 72px;
        height: 72px;
        margin-right: 10px;
        border-radius: 4px;
      }
      .video-play-con {
        display: flex;
        flex-direction: column;
        font-size: 13px;
        .video-text {
          color: #606266;
        }
        .video-url {
          color: #ABADB3;
        }
      }
    }
    .work-info-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .work-info-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      position: fixed;
      width: 960px;
      z-index: 999;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }

    .work-info-dialog {
      font-size: 14px;
      color: #606266;
      .input-with-select {
        > > > .el-input__inner {
          color: #333;
        }
      }
    }

    .work-info-dialog > > > .el-dialog {
      overflow-y: auto;
      height: 80%;
    }
    .work-info-dialog > > > .el-dialog .el-dialog__body {
      margin-top: 48px;
    }

    .inner-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }

    .inner-dialog {
      .company-key {
        margin-right: 12px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header .has-gutter th {
        padding: 6px 0px;
      }
    }
    > > > .el-button {
      line-height: 1.2;
    }
    .circle_pic {
      margin-left: 5px;
      object-fit: cover;
      width: 40px;
      height: 40px;
    }
  }
</style>

